<template>
  <div>
    <el-button
      v-show="pageStack.length > 1"
      class="btn-back"
      type="warning"
      @click="back"
    >
      <i class="icon-undo2"></i>
      {{
        pageStack[pageStack.length - 1] === 3 ? '返回主页' : '上一页'
      }}</el-button
    >
    <commonDisease
      v-show="pageStack[pageStack.length - 1] === 0"
      tab-name="HealthCare"
      :baby-id="activeName.params.babyId"
      @next="next"
    ></commonDisease>
    <healthCareDetail
      v-show="pageStack[pageStack.length - 1] === 1"
      :id="id"
      @next="next"
    ></healthCareDetail>
    <advisoryDetail
      v-show="pageStack[pageStack.length - 1] === 2"
      :id="id"
      :record_id="record_id"
      @next="next"
    ></advisoryDetail>
    <advisoryDetailRes
      v-if="pageStack[pageStack.length - 1] === 3"
      :id="id"
      :record_id="record_id"
    ></advisoryDetailRes>
  </div>
</template>
<script>
import commonDisease from '@/components/advisory/commonDisease';
import healthCareDetail from '@/components/advisory/healthCareDetail/healthCareDetail';
import advisoryDetail from '@/components/advisory/advisoryDetail/advisoryDetail';
import advisoryDetailRes from '@/components/advisory/advisoryDetail/advisoryDetailRes';

export default {
  components: {
    commonDisease,
    healthCareDetail,
    advisoryDetail,
    advisoryDetailRes
  },
  props: {
    activeName: {
      type: Object,
      default: () => ({
        nav: '0',
        params: {}
      })
    }
  },
  data() {
    return {
      pageStack: [0]
    };
  },
  watch: {
    'activeName.nav': {
      handler() {
        if (this.activeName.nav === '3') {
          this.id = this.activeName.params.babyId;
          this.record_id = this.activeName.params.recordId;
          this.next({}, 3);
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    next(data, index) {
      if (index === 1) {
        this.id = data.id;
      }
      if (index === 2) {
        this.record_id = +data.record_id;
      }
      this.pageStack.push(index);
    },
    back() {
      if (this.pageStack[this.pageStack.length - 1] === 3) {
        this.activeName.nav = null;
        this.pageStack = [0];
        return;
      }

      this.pageStack.pop();
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-back {
  position: absolute;
  top: -68px;
  right: 30px;
  font-size: 16px;
  border-radius: 25px;
  padding: 7px 12px;
}
</style>
<style lang="scss">
.el-tabs__content {
  overflow: visible;
}
</style>
